/* Reset */
* { margin: 0;  box-sizing: border-box; }

:root {
  --bg: #f5f5f7;          /* Light neutral background (Apple gray) */
  --card: #ffffff;        /* Card background */
  --ink: #1d1d1f;         /* Primary text (Apple black) */
  --muted: #6e6e73;       /* Secondary text (Apple gray) */
  --soft: #e5e5ea;        /* Soft divider / subtle gray */
  
  /* Apple-inspired accent colors */
  --brandA: #007aff;      /* iOS Blue (System accent) */
  --brandB: #ffcc00;      /* Yellow (warning/accent) */
  --brandC: #ff3b30;      /* Red (destructive action) */
  --brandD: #34c759;      /* Green (success) */
  --brandE: #af52de;      /* Purple (creative accent) */
  
  --cta: #007aff;         /* Primary call-to-action (Apple blue) */
  --ctaH: #005ecb;        /* Hover state (darker blue) */
  
  --overlay: rgba(0, 0, 0, 0.6); /* Overlay for modals/popups */
}

/* Layout */
.lx-body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lx-advertisement {
    text-align: center;
    font-size: 10px;
    color: #999;
    padding: 4px;
    background: #fff;
    width: 100%;
}

.lx-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #efefef;
  padding: 14px 12px;
}
.lx-topbar__title{ font-weight: 600; }

.lx-main{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  flex: 1; /* sticky footer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lx-card{
  width: 100%;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 16px 20px;
}

.lx-brand{ text-align: center; margin-bottom: 8px; }
.lx-brand__img{ width: 96px; height: auto; }

.lx-lead{
  text-align: center;
  margin: 0px auto 18px;
  max-width: 720px;
  line-height: 1.6;
  color: var(--ink);
}

.lx-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 6px;
}
@media (max-width: 840px){
  .lx-grid{ grid-template-columns: 1fr; }
}

.lx-label{
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-meter{
  height: 20px;
  background: var(--soft);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}
.lx-meter__seg{ height: 100%; width: 0%; transition: width .8s ease; }
.lx-meter__seg--a{ background: var(--brandA); }
.lx-meter__seg--b{ background: var(--brandB); }
.lx-meter__seg--c{ background: var(--brandC); }
.lx-meter__seg--d{ background: var(--brandD); }
.lx-meter__seg--e{ background: var(--brandE); }

.lx-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 12px;
}
.lx-row--summary{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d7d7d7;
}
.lx-row__label{ font-weight: 600; }
.lx-row__status{ color: var(--muted); }
.lx-row__status--spin{ display: inline-block; }
.lx-row__status--done{ display: none; text-align: right; }

.lx-cta{
  margin-top: 8px;
  text-align: center;
}
.lx-cta p{
  margin: 8px 8px 20px 8px;
}
.lx-btn{
  background: var(--cta);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.lx-btn:hover{ background: var(--ctaH); }

/* Footer */
.lx-footer{
  background: #d8d8d8;
  color: #000;
  margin-top: 300px;
  padding: 16px 0 28px;
}
.lx-footer__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px;
}
.lx-footer__inner p{
  font-size: 12px;
  color: #747474;
  text-align: center;
}
.lx-footer__link{
  color: #147de5;
  text-decoration: underline;
  cursor: pointer;
}

/* Modal */
.lx-modal__wrap{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: grid;
  place-items: start center;
  padding-top: 80px;
  z-index: 9999;
}
.lx-hide{ display: none !important; }

.lx-modal {
  width: min(600px, 95vw);
  background: #fff;
  border-radius: 6px;
  color: #3b3b3b;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* so header/body/footer stack */
  max-height: 75vh;       /* overall max height */
}

.lx-modal__head {
  padding: 12px 14px;
  flex: 0 0 auto;
}
.lx-modal__headin{
  display: flex;
  gap: 12px;
  align-items: center;
}
.lx-modal__icon{ width: 46px; height: 46px; }

.lx-modal__body {
  padding: 10px 16px;
  flex: 1 1 auto;          /* grow/shrink */
  overflow-y: auto;        /* scroll here */
}
.lx-modal__foot {
  padding: 10px 14px 14px;
  text-align: center;
  background: #fafafa;
  flex: 0 0 auto;
}
.lx-modal__btn{
  font-size: 17px;
  padding: .5rem 1rem;
  font-weight: 700;
  background: transparent;
  color: #0b7efb;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* Animations */
.lx-anim-in{ animation: lx-pop .45s ease; }
@keyframes lx-pop{
  from{ opacity: 0; transform: translateY(-24px); }
  to{ opacity: 1; transform: translateY(0); }
}